<template>
  <div>
    <!--添加相机-->
    <div class="camera" @click="addCamera">添加摄像头</div>
    <!--控制相机旋转，显示摄像头内容-->
    <div class="roll" v-show="$store.state.camera.cameraUI">
      <div>cameraId：{{$store.state.camera.cameraId}}</div>
      <div class="showVideo" @click="showVideo">显示监控</div>
      <div class="left" @click="turnLeft"></div>
      <div class="right" @click="turnRight"></div>
    </div>
    <show-video></show-video>
  </div>
</template>

<script>
  import addCamera from 'assets/js/CesiumFun/cameraOperate/addCamera'        // 添加摄像头
  import cameraClick from 'assets/js/CesiumFun/cameraOperate/cameraClick'     // 摄像头点击
  import { cameraLeft, cameraRight } from 'assets/js/CesiumFun/cameraOperate/cameraRotation' //摄像头旋转

  import showVideo from 'components/ToolBar/camera/showVideo'         //监控画面

  export default {
    props: {
      viewer: undefined,
      scene: undefined
    },
    name: '',
    data() {
      return {
        cameraId: 1,     // 摄像机Id
        cameraPosition: {// 相机位置
          lon: 120.43154, lat: 36.31398, height: 10
        },
      }
    },
    components: {
      showVideo,
    },

    methods: {
      // 添加摄像头
      addCamera() {
        addCamera(this.scene, this.cameraPosition, this.cameraId);
        this.cameraPosition.lon += 0.00005;
        this.cameraId += 1;
        cameraClick(this.viewer)// 给每个相机添加移动方法（左键移动，右键旋转及详情）
      },
      // 摄像头左旋转
      turnLeft() {
        cameraLeft();
      },
      // 摄像头右旋转
      turnRight() {
        cameraRight();
      },
      // 显示摄像头影像
      showVideo() {
        this.$store.commit('videoShow', true);// 显示视频框
      }
    }
  }
</script>

<style scpoed>
@import '~assets/css/Cesium/camera/cameraChange.css';
</style>